<template>
  <merge-table :table-data="tableData" :merge-arr="mergeArr">
    <!-- <el-table-column fixed prop="warehouseName" label="仓库/库区">
      <template v-slot="{ row }">
        <span>{{ row.warehouseName }}</span>

        <el-popover
          v-if="!row.warehouseId"
          placement="top-start"
          title="提示"
          width="200"
          trigger="hover"
          content="该物料未分配仓库/库区。"
        >
          <a
            slot="reference"
            class="el-icon-question blue"
            @click="allocationItem(row)"
            >分配</a
          >
        </el-popover>

        <el-popconfirm
          v-if="row.warehouseDelFlag == 1"
          placement="top-start"
          icon="el-icon-info"
          icon-color="red"
          width="200"
          trigger="hover"
          @confirm="deleteItem(row)"
          title="该仓库已经被逻辑删除,是否清除库存记录？"
        >
          <a slot="reference" class="el-icon-question red">删除</a>
        </el-popconfirm>
      </template>
    </el-table-column> -->
    <el-table-column
      fixed
      width="120"
      label="下单日期"
      align="center"
      prop="dataDate"
    ></el-table-column>
    <el-table-column fixed label="品牌" align="center" prop="brandName" />
    <el-table-column fixed label="供应商" align="center" prop="supplier" />
    <el-table-column
      fixed
      width="120"
      label="合同号"
      align="center"
      prop="contractNumber"
    />
    <el-table-column
      fixed
      label="采购单号"
      align="center"
      prop="purchaseOrderNumber"
    />
    <el-table-column
      width="120"
      fixed
      label="产品款号"
      align="center"
      prop="spu"
    />
    <el-table-column fixed label="颜色" align="center" prop="colorProperty" />

    <el-table-column align="center" prop="firstLevelColumn" label="一级类目">
    </el-table-column>
    <el-table-column align="center" prop="secondLevelColumn" label="二级类目">
    </el-table-column>
    <el-table-column align="center" prop="threeLevelColumn" label="三级类目">
    </el-table-column>
    <el-table-column label="新品/老品" align="center" prop="isNewProduct" />
    <el-table-column label="下单数量" align="center" prop="orderQuantity" />
    <el-table-column
      label="合同采购价"
      align="center"
      prop="contractPurchasePrice"
    />
    <el-table-column
      label="合同采购金额"
      align="center"
      prop="contractAmount"
    />
    <el-table-column label="是否含税" align="center" prop="isTaxIncluded" />
    <el-table-column
      label="单件附加费用"
      align="center"
      prop="additionalCostPerUnit"
    />
    <el-table-column
      label="订单附加费用"
      align="center"
      prop="orderAdditionalCost"
    />
    <el-table-column
      label="附加费用说明"
      align="center"
      prop="additionalCostDescription"
    >
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="bottom" width="300">
          <!-- <span>{{ scope.row.fabricComposition }}</span> -->
          <el-input
            v-model="scope.row.additionalCostDescription"
            :min-height="192"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 24 }"
            :style="{ width: '100%' }"
            :disabled="true"
          />
          <div slot="reference">
            <span class="textname">
              {{ scope.row.additionalCostDescription }}
            </span>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="成本裸价（含税）"
      align="center"
      prop="costPriceIncludingTax"
    />
    <el-table-column
      label="成本裸价(不含税)"
      align="center"
      prop="costPriceExcludingTax"
    />
    <!-- <el-table-column label="单件税金" align="center" prop="taxAmountPerUnit" /> -->
    <el-table-column
      label="协议到货日期"
      align="center"
      prop="contractDeliveryDate"
      width="120"
    >
      <template slot-scope="scope">
        <span>{{
          parseTime(scope.row.contractDeliveryDate, "{y}-{m}-{d}")
        }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="已入库数量"
      align="center"
      prop="quantityReceived"
    />
    <el-table-column label="是否准交" align="center" prop="isOverdue30Days" />
    <el-table-column
      label="协议日期内已交货数量"
      align="center"
      prop="overdueQuantity30Days"
    />
    <el-table-column label="是否超入" align="center" prop="isOverOrder" />
    <el-table-column label="超入数量" align="center" prop="overOrderQuantity" />
    <el-table-column label="备注" align="center" prop="remarks" />
  </merge-table>
</template>

<script>
import MergeTable from "@/views/example/inventory/component/MergeTable.vue";
// import {delWmsInventoryByWarehouse} from "@/api/wms/inventory";

export default {
  name: "PanelByWarehouse",
  components: { MergeTable },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    // loading: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {
      mergeArr: ["dataDate"], // 表格中的列名
    };
  },

  methods: {
    deleteItem(row) {
      delWmsInventoryByWarehouse(row.warehouseId).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.$emit("update", row);
      });
    },
    allocationItem(row) {
      console.log("该物料未分配仓库/库区。", row);
      this.$message({
        message: "该功能暂未开放",
        type: "warning",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>